$avatar-size: 150px;
$nickname-font-size: 32px;
$is-debug: false;

$main-radius: 10px;
$card-inner-padding: 10px;

$deep-gray: #6c6e7a;
$light-gray: #f6f8fa;

::-webkit-scrollbar {
	/*滚动条整体样式*/
	width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: $deep-gray;
  // background-image: -webkit-linear-gradient(
  //     45deg,
  //     rgba(255, 255, 255, 0.2) 25%,
  //     transparent 25%,
  //     transparent 50%,
  //     rgba(255, 255, 255, 0.2) 50%,
  //     rgba(255, 255, 255, 0.2) 75%,
  //     transparent 75%,
  //     transparent
  // );
}
::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background   : #ededed;
}
p {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: #0969da;
	&:hover {
		text-decoration: underline;
	}
}

ul {
	padding: 0;
}

li {
	list-style: none;
}

@mixin good-at($color) {
	background-color: $color;
	padding: $card-inner-padding;
	border-radius: 10px;
	color: white;
	li {
		line-height: 1.5;
	}
}

@mixin simple-shadow {
	box-shadow: 0 1px 5px rgba(27, 31, 35, .15), 0 0 1px rgba(106, 115, 125, .35);
}

.svg-icon {
	position: relative;
	top: 8px;
	width: 30px;
	height: 30px;
}

.tiny-icon {
	position: relative;
	top: 5px;
	// width: 20px;
	height: 20px;
}

#article-title {
	text-align: center;
	font-weight: 400;
	margin: 15px 0;
}

.container {
	width : 1312px;
	margin: 0 auto;
}

.head-content {
	@include simple-shadow();
	background-image: url(../img/headbg.png);
	background-size: 100% 100%;
	border-radius: $main-radius $main-radius 0 0;
	display: flex;
	width: 100%;
	height: 200px;

	.person-card {
		margin-left: 20px;
		width: 400px;
		display: flex;
		#avatar {
			img {
				width: $avatar-size;
    		height: $avatar-size;
				border-radius: 50%;
			}
			height: $avatar-size;
			border-radius: 50%;
			border: gray solid 5px;
			align-self: center;
		}
		#card-info {
			flex: 1;
			margin-left: 25px;
			#nickname {
				color: white;
				font-weight: bold;
				margin: 25px 0;
				font-size: $nickname-font-size;
			}
			#signature {
				margin-left: -5px;
				margin-top: -10px;
				padding: 10px;
				font-size: 18px;
				background-color: rgba($color: $light-gray, $alpha: 0.7);
				color: $deep-gray;
				border-radius: 10px;
				width: 180px;
				// background-color: rebeccapurple;
			}
		}

	}
}

#music-player {
	height: 150px;
	width: 200px;
	background-color: white;
	align-self: center;
	border-radius: $main-radius;
	display: flex;
	flex-direction: column;
	@include simple-shadow();
	#music-player-title {
		border-radius: $main-radius $main-radius 0 0;
		padding: 8px;
		text-align: center;
		background-color: #4ba946;
		color: white;
		svg {
			width: 20px;
			height: 20px;
			position: relative;
			top: 5px;
			left: 2px;
		}
	}
	#music-song {
		height: 40px;
		background-color: $light-gray;
		border-radius: $main-radius;
		width: 90%;
		margin: 5px auto;
		flex: 1;
		#current-play-tip {
			margin-top: 3px;
			text-align: center;
			color: $deep-gray;
		}
		#current-play {
			margin-top: 5px;
			padding: 0 5px;
		}
	}
	#control-panal {
		width: 150px;
		height: 35px;
		margin: 5px auto;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.btn-div {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			text-align: center;
			// border: 1px solid gray;
			background-color: #dfdfdf;
			box-shadow: 0 1px 5px rgba(27, 31, 35, .15), 0 0 1px rgba(106, 115, 125, .35);
			&:hover {
				background-color: #cfcfcf;
			}
			&:active {
				background-color: #adadad;
			}
			svg {
				width: 20px;
				height: 20px;
				position: relative;
				top: 5px;
				// right: 2px;
				&#play {
					left: 2px;
				}
				// &#pause {
				// 	height: 15px;
				// }
			}
		}
	}
}

.person-info-container {
	@include simple-shadow();
	padding: 15px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	border-radius: 0 0 $main-radius $main-radius;
	.info-card {
		padding: 15px;
		border-radius: 10px;
		@include simple-shadow();
		.info-title {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.info-content {
			.key-value {
				display: flex;
				align-items: flex-end;
				margin-bottom: 2px;
				.key {
					width: 80px;
					margin-right: 5px;	
					.key-text {
						display: inline-block;
						padding: 1px 3px;
						color: white;
						border-radius: 5px;
					}
					&.wide-key {
						width: 100px;
					}
				}
				.value {
					color: $deep-gray;
					font-weight: bold;
				}
			}
		}
	}
}

#profile {
	grid-column: 1 / 3;
}

#it-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas: 'a b' 'c b';
	gap: 10px;
	#front-end {
		@include good-at(#5192f9);
		// &:hover {
		// 	background-image: linear-gradient(102.96deg, rgb(0, 43, 91) 5.48%, rgb(95, 76, 239) 84.59%, rgb(107, 87, 255) 101.72%);
		// }
	}
	#back-end {
		@include good-at(rgba(#dc4e41, 0.95));
		grid-area: b;
		transition: background-image 2s;
		// &:hover {
		// 	background-image: linear-gradient(102.96deg, rgb(0, 43, 91) 5.48%, rgb(253, 13, 122) 84.59%, rgb(253, 13, 122) 101.72%);
		// }
	}
	#game-dev {
		@include good-at(rgba(#4ba946, 0.95));
		// &:hover {
		// 	background-image: linear-gradient(102.96deg, rgb(0, 43, 91) 5.48%, rgb(96, 200, 77) 84.59%, rgb(96, 200, 77) 101.72%);
		// }
	}
}

.profile-content {
	display: flex;
	.profile-table {
		margin-right: 20px;
		border: 2px dashed #fec133;
		text-align: center;
		border-spacing: 5px;
		td {
			padding: 4px 10px;
		}
		.big-item {
			background-color: skyblue;
			color: white;
		}
		.table-item-key {
			background-color: yellowgreen;
			color: white;
		}
		.table-item-value {
			background-color: $light-gray;
			color: $deep-gray;
		}
	}
	.profile-text-box {
		flex: 1;
		// background-color: #5192f9;
		background: linear-gradient(335.07deg, rgb(99, 108, 234) 0%, rgb(131, 76, 239) 40.63%, rgb(119, 31, 137) 100%);
		padding: 20px;
		border-radius: $main-radius;
		.profile-text {
			column-count: 3;
			column-gap: 40px;
			column-rule: 3px outset $deep-gray;
			column-rule-style: dashed;
			p {
				color: white;
				text-indent: 2em;
				text-align: justify;
				line-height: 1.5;
			}
		}
	}
}

.hobby-info-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	.hobby-card {
		// background: linear-gradient(120.81deg, rgb(0, 51, 150) 11.31%, rgb(0, 156, 244) 95.37%);
		background-color: rgb(255, 227, 174);
		border-radius: $main-radius;
		padding: $card-inner-padding;
		.hobby-card-title {
			font-weight: bold;
			color: #916f0b;
			margin-bottom: 8px;
			font-size: 18px;
		}
		.hobby-card-content {
			.hobbies {
				display: flex;
				.hobby-name {
					background-color: #f8f9fa;
					color: rgb(206, 135, 5);
					padding: 5px;
					border-radius: 5px;
					margin-right: 5px;
					font-size: 15px;
					&:hover {
						cursor: default;
						background-color: #dbdbdb;
					}
					&.active {
						background-color: #e0a800;
						color: white;
					}
				}
			}
			.hobby-content {
				margin-top: 12px;
				height: 158px;
				overflow-y: auto;
				background-color: #fcf7e8;
				padding: 10px;
				border-radius: $main-radius;
				color: rgb(206, 135, 5);
				p {
					text-align: justify;
					text-indent: 2em;
				}
			}
		}
	}
}

#works {
	grid-column: 1 / 3;
	.work-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		padding: 15px;
		.work-card {
			flex: 1;
			img {
				width: 100%;
				border-radius: $main-radius;
				@include simple-shadow();
				border: 2px $light-gray solid;
			}
			.work-describe {
				text-align: center;
				margin-top: 10px;
				span {
					background-color: $light-gray;
					padding: 5px;
					border-radius: 5px;
					color: $deep-gray;
				}
			}
		}
	}
}